<template>
	<div class="pannel">
		<div class="rank">
			<div v-if="schTopicVos.length > 0">
				<a-tabs :active-key="curTopic.topicId" @tabClick="changeTopic" :tabBarGutter="0">
					<a-tab-pane v-for="(item, index) in schTopicVos" :key="index">
						<div slot="tab" class="tags-views-item">
							<label
								slot="tab"
								:class="{
									active: curTopic.topicId == item.topicId,
									isHasBorderRadius:
										index == 0 && curTopic.topicId == item.topicId && schTopicVos.length < 12,
								}"
							>
								<!-- 第{{ item.bigNum }}-{{ item.subNum }}题 -->
								第{{ item.bigNum }}-{{ index + 1 }}题
							</label>
						</div>
					</a-tab-pane>
				</a-tabs>
				<div class="answerInfo">
					<span>
						题型：
						<span class="topicTypeName">{{ filterTopicTypeName(curTopic.topicType) }}</span>
					</span>
					<span style="margin-left: 20px">
						正确答案：
						<span class="topicTypeName">{{ curTopic.answer }}</span>
					</span>
					<span style="margin-left: 20px">
						答题类型：
						<span class="topicTypeName">{{ getAnswerType(curTopic.ty) }}</span>
					</span>
				</div>
			</div>
			<div class="conbox-con">
				<div class="conbox-bd">
					<div class="conbox-bd-inner">
						<template v-if="questionType == 'team'">
							<teamCount ref="teamCount" :operateType="operateType" :curTopic="curTopic"></teamCount>
						</template>
						<template v-else>
							<template v-if="operateType == 'rank'">
								<div class="imgbox">
									<img
										style="height: 100%; width: auto"
										v-if="
											schTopicVos &&
											schTopicVos.length > 0 &&
											countData.answerList[0].userList.length == 0
										"
										:src="`/impromptu${isPro ? '_pro' : ''}/nodata.png`"
									/>
									<div
										class="img-con"
										v-if="countData.schStudAnswerVos && countData.schStudAnswerVos.length > 0"
										v-for="(item, index) in countData.schStudAnswerVos"
									>
										<div class="imgItem" :class="['img0' + item.index]">
											<img
												:src="
													(isPro ? '/impromptu_pro/img0' : '/impromptu/img0') +
													item.index +
													'.png'
												"
											/>
											<span class="number">{{ item.index }}</span>
											<div class="name" :title="item.studName || ''">
												<div class="name-stuName" style="-webkit-box-orient: vertical">
													{{ item.studName || '' }}
												</div>
											</div>
										</div>
									</div>
								</div>
								<div
									class="flex"
									style="
										height: calc(100% - 190px);
										margin: 20px 30px 0;
										border-top: 2px dashed #787878;
									"
								>
									<div class="userCount rankCount flex flex-v">
										<div
											class="btn"
											:class="{ warning: item.name == '回答错误', cancel: item.name == '未提交' }"
											v-for="(item, index) in countData.answerList"
											:key="index"
											style="cursor: pointer; padding: 0"
										>
											<a-tooltip
												placement="topLeft"
												:overlay-class-name="isPro ? 'tooltipColor_official' : 'tooltipColor'"
												arrow-point-at-center
												trigger="click"
											>
												<template slot="title">
													<div v-if="item.userList && item.userList.length > 0">
														<div class="popover-hd">{{ item.name }}</div>
														<div class="popover-bd">
															<span
																class="studName"
																v-for="(studName, indexs) in item.userList"
																:key="indexs"
															>
																{{ studName
																}}{{ indexs < item.userList.length - 1 ? '、' : '' }}
															</span>
														</div>
													</div>
												</template>
												<div style="padding: 10px 20px">
													<img
														:src="
															(isPro ? '/impromptu_pro' : '/impromptu') + '/correct.png'
														"
														class="icon"
														v-if="item.name == '回答正确'"
													/>
													<img
														src="/impromptu/error.png"
														class="icon"
														v-if="item.name == '回答错误'"
													/>
													<img
														src="/impromptu/noanswer.png"
														class="icon"
														v-if="item.name == '未提交'"
													/>
													<span class="name"
														>{{ item.name }} ({{ item.userList.length }}人
														{{ item.percent }}%)</span
													>
												</div>
											</a-tooltip>
										</div>
										<div class="detail">
											<span class="num"
												>作答人数{{ countData.awCountMap.submitCount }}/{{
													countData.awCountMap.studentsCount
												}}</span
											>
											<span class="finishStuPer"
												>参与率：{{ countData.awCountMap.cangyurate }}%</span
											>
										</div>
									</div>
									<div class="barChart flex-1">
										<Chart
											:optionData="option_column"
											style="height: 100%; padding-bottom: 10px"
										></Chart>
									</div>
								</div>
							</template>
							<template v-if="operateType == 'detail'">
								<!-- 作答学生 -->
								<answerStu
									:answerStuList="studTmpAnswerList"
									:finishStuNum="countData.awCountMap.submitCount"
									:curTopic="curTopic"
								></answerStu>
							</template>
						</template>
						<div class="right-tabs">
							<div class="tab" :class="[{ blue: operateType == 'detail' }]" @click="skipPage('detail')">
								作答学生
							</div>
							<div class="tab" :class="[{ blue: operateType == 'rank' }]" @click="skipPage('rank')">
								排名统计
							</div>
							<!-- <div class="tab ant-btn-warning" @click="reback">返回</div> -->
						</div>
					</div>

					<a href="javascript:;" class="closeWin" @click="reback"><img src="closeWin.png" alt="" /></a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex';
let chartdata = [];
const colorList = ['#70A2F4', '#FFAA00', '#00BEC5', '#C6AFFB', '#FBDB5B', '#FA6401', '#80E8A6', '#CCCCCC'];
import Chart from '@/components/z-charts.vue';
import { topicTypeListEnum, answerTypeEnum } from '@/utils/enumeration.js';
import store from '@/store';
const primaryColor = store.state.isPro ? '#5697F5' : '#00BEC5';
import answerStu from './answerStu';
import teamCount from './teamCount';
export default {
	name: 'tempAnswerCount',
	components: {
		Chart,
		answerStu,
		teamCount,
	},
	props: {},
	data() {
		return {
			operateType: 'rank',
			option_column: {
				textStyle: {
					color: '#c0c3cd',
					fontSize: 14,
				},
				grid: {
					containLabel: true,
					left: 40,
					right: 40,
					bottom: 100,
					top: 80,
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: 'none', // 默认为直线，可选为：'line' | 'shadow'
					},
					show: true,
					confine: true,
					backgroundColor: 'rgba(255,255,255)',
					extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);',
					textStyle: {
						color: '#505050',
					},
					formatter: function (param) {
						let name = param[0].name;
						let value = param[0].value;
						let color = colorList[param[0].dataIndex];
						if (name == '未作答') {
							color = colorList[colorList.length - 1];
						}
						return (
							'<div style="display:flex;justify-content: space-between;align-items: center;">' +
							'<i style="height:10px;width:10px;border-radius: 50px;display:block;margin-right:10px;background:' +
							color +
							';"></i><span style="flex:1">' +
							name +
							':</span><span style="font-weight:bold;font-size: 16px;color:' +
							primaryColor +
							';">' +
							value +
							'</span>人</div>'
						);
					},
				},
				xAxis: {
					nameTextStyle: {
						color: '#ffffff',
						padding: [0, 0, -10, 0],
						fontSize: 14,
					},
					axisLabel: {
						color: primaryColor,
						fontSize: 22,
						fontWeight: 700,
						interval: 0,
					},
					axisTick: {
						show: false,
						lineStyle: {
							color: '#384267',
						},
					},
					splitLine: {
						show: false,
					},
					axisLine: {
						lineStyle: {
							color: primaryColor,
							width: 4,
						},
						show: true,
					},
					data: [],
					type: 'category',
				},
				yAxis: {
					nameTextStyle: {
						color: '#ffffff',
						padding: [0, 0, -10, 0],
						fontSize: 14,
					},
					axisLabel: {
						show: false,
						color: '#ffffff',
						fontSize: 14,
					},
					axisTick: {
						show: false,
					},
					splitLine: {
						show: false,
						lineStyle: {
							color: '#335971',
							// "type": "dashed"
						},
					},
					axisLine: {
						lineStyle: {
							color: '#668092',
							width: 1,
							// "type": "dashed"
						},
						show: false,
					},
					name: '',
				},
				series: [
					{
						data: [],
						type: 'bar',
						barMaxWidth: 'auto',
						barWidth: 30,
						itemStyle: {
							normal: {
								barBorderRadius: 0,
								color: (params) => {
									//console.log("柱子颜色"+JSON.stringify(params))
									if (params.name == '未作答') {
										return colorList[colorList.length - 1];
									} else {
										return colorList[params.dataIndex];
									}
								},
							},
						},
						label: {
							show: true,
							position: 'top',
							distance: 10,
							color: primaryColor,
							formatter: function (data) {
								console.log('datalabel' + JSON.stringify(data.data.percent));
								if (data.data.percent != undefined) {
									return '{c|' + data.value + '}\n\n(' + data.data.percent.toFixed(2) + '%)';
								} else {
									return data.value;
								}
							},
							align: 'center',
							rich: {
								c: {
									fontWeight: 'bold',
									fontSize: 18,
									color: primaryColor,
								},
							},
						},
					},
				],
			},
			//统计数据
			countData: {
				schStudAnswerVos: [], //排名名单
				awCountMap: {
					submitCount: 0,
					studentsCount: 0,
					cangyurate: 0,
				},
				answerList: [
					{
						name: '回答正确',
						percent: 0,
						userList: [],
					},
					{
						name: '回答错误',
						percent: 0,
						userList: [],
					},
					{
						name: '未提交',
						percent: 0,
						userList: [],
					},
				],
			},
			studTmpAnswerList: [],
			schTopicVos: [],
			curTopic: {}, //当前题目信息
			finishStuNum: 0,
			list: [],
			questionType: 'team', //single team
		};
	},
	computed: {
		...mapState({
			hostname: (state) => state.hostname,
			isPro: (state) => state.isPro,
		}),
	},
	created() {
		this.getCountData();
	},
	methods: {
		async getCountData() {
			let beginClassData = this.$ls.get('beginClass'); //上课数据
			if (beginClassData && JSON.stringify(beginClassData) != '{}') {
				if (beginClassData.csId) {
					await this.getTestquestList(beginClassData.csId);
					//如果是分组，进入分组统计
					if (this.curTopic.ty == 2) {
						this.questionType = 'team';
						this.$nextTick(() => {
							this.$refs.teamCount.getGroupReportData(this.curTopic.sdQuestId);
						});
					} else {
						this.questionType = 'single';
						await this.getTempstat();
					}
				}
			}
		},
		//获取试题
		getTestquestList(csId) {
			return this.$postAction(this.$sysManageapi.testquestUrl.getTemplastOne, {
				csId,
			}).then((res) => {
				if (res && res.code == 1) {
					if (res.data && res.data.length > 0) {
						let schTopicVos = [];
						res.data.forEach((item) => {
							let items = { ...item };
							if (items.topicName && items.topicName.includes('T')) {
								items.bigNum = 'T';
							}
							schTopicVos.push(items);
						});
						this.schTopicVos = [...schTopicVos];
						this.curTopic = this.schTopicVos[this.schTopicVos.length - 1];
					}
				}
			});
		},
		//切换题目
		changeTopic(index) {
			this.curTopic = this.schTopicVos[index];
			//如果是分组，进入分组统计
			if (this.curTopic.ty == 2) {
				this.questionType = 'team';
				this.$nextTick(() => {
					this.$refs.teamCount.getGroupReportData(this.curTopic.sdQuestId);
				});
			} else {
				this.questionType = 'single';
				this.getTempstat();
			}
		},
		//临时题统计
		getTempstat() {
			if (this.curTopic.topicId) {
				return this.$postAction(
					this.$sysManageapi.answerUrl.getTempstat + '?&sdQuestId=' + this.curTopic.sdQuestId
				).then((res) => {
					if (res && res.code == 1) {
						console.log('统计结果=' + JSON.stringify(res));
						this.countData = res.data;
						this.option_column.series[0].data = [];
						this.option_column.xAxis.data = [];

						this.countData.answerList = [];
						if (this.countData.awCountMap && JSON.stringify(this.countData.awCountMap) != '{}') {
							let nosubmitrate = (
								((this.countData.awCountMap.studentsCount -
									this.countData.awCountMap.currcount -
									this.countData.awCountMap.errorCount) /
									this.countData.awCountMap.studentsCount) *
								100
							).toFixed(2);
							this.countData.answerList = [
								{
									name: '回答正确',
									percent: this.countData.awCountMap['currrate'].toFixed(2),
									userList: (this.countData.stuNames && this.countData.stuNames.currNames) || [],
								},
								{
									name: '回答错误',
									percent: this.countData.awCountMap['errorrate'].toFixed(2),
									userList: (this.countData.stuNames && this.countData.stuNames.errorNames) || [],
								},
								{
									name: '未提交',
									percent: nosubmitrate,
									userList: (this.countData.stuNames && this.countData.stuNames.unsubmitNames) || [],
								},
							];
							//各选项情况
							for (var key in this.countData.map) {
								let name = key;
								if (key == 'W') {
									name = '未作答';
								}
								if (key == 'V') {
									name = '其它';
								}

								//this.countData.map[key].percent=this.countData.mapRate[key]
								this.option_column.xAxis.data.push(name);
								this.option_column.series[0].data.push({
									name,
									value: this.countData.map[key],
									percent: this.countData.mapRate[key],
								});
								// this.option_column.series[0].data.push(this.countData.map[key]);
							}
							this.studTmpAnswerList = [];
							let _this = this;
							if (
								this.countData &&
								this.countData.studTmpAnswerVos &&
								this.countData.studTmpAnswerVos.length > 0
							) {
								let studTmpAnswerVos = [...this.countData.studTmpAnswerVos];
								//有提交正确人数
								let hasSubmitCorrectUserList = studTmpAnswerVos.filter((subitem) => {
									let items = {
										...subitem,
									};
									//特别处理数字题
									if (this.curTopic.topicType == 5) {
										return (
											this.curTopic.answer &&
											parseFloat(items.answer) == parseFloat(this.curTopic.answer)
										);
									} else {
										return this.curTopic.answer && items.answer == this.curTopic.answer;
									}
								});
								//有提交错误人员
								let hasSubmitUserErrorList = studTmpAnswerVos.filter((subitem) => {
									let items = {
										...subitem,
									};
									if (_this.curTopic.topicType == 5) {
										return (
											(items.answer || items.answer == 0) &&
											parseFloat(items.answer) != parseFloat(this.curTopic.answer)
										);
									} else {
										return items.answer && items.answer != this.curTopic.answer;
									}
								});
								//错误也按照时间从少到多排序
								hasSubmitUserErrorList.sort(function (a, b) {
									return a.time - b.time; // 按照时间从少到多排序
								});
								console.log('错误人员' + JSON.stringify(hasSubmitUserErrorList));
								//未提交人员
								let noSubmitUserList = studTmpAnswerVos.filter((subitem) => {
									let items = {
										...subitem,
									};
									return !items.answer || items.answer == null;
								});
								//有提交正确人员按时间最少排序
								let ranklist = hasSubmitCorrectUserList.sort(function (a, b) {
									return a.time - b.time; // 按照时间从少到多排序
								});
								/* 计算有提交正确学生排名 */
								let newranklist = [...ranklist];
								newranklist.forEach((item, index) => {
									if (index == 0) {
										item.rank = 1;
									} else {
										if (item.time == newranklist[index - 1].time) {
											item.rank = newranklist[index - 1].rank;
										} else {
											item.rank = index + 1;
										}
									}
								});
								console.log('正确人员' + JSON.stringify(hasSubmitCorrectUserList));
								console.log('正确人员排名后' + JSON.stringify(newranklist));
								//最后一个有提交且正确的排名
								let hasSubmitCorrectlastRank =
									newranklist.length > 0 ? newranklist[newranklist.length - 1].rank : 0;
								//给有提交错误排名
								hasSubmitUserErrorList.forEach((items) => {
									items.rank = hasSubmitCorrectlastRank + 1;
								});
								//给未提交排名
								noSubmitUserList.forEach((items) => {
									items.rank = hasSubmitCorrectlastRank + 2;
								});
								let hasSubmitUserList = [...newranklist].concat(hasSubmitUserErrorList);
								this.studTmpAnswerList = [...hasSubmitUserList].concat(noSubmitUserList);
							} else {
								this.studTmpAnswerList = [];
							}
						} else {
							this.studTmpAnswerList = [];
							this.countData = {
								schStudAnswerVos: [], //排名名单
								awCountMap: {
									submitCount: 0,
									studentsCount: 0,
									cangyurate: 0,
								},
								answerList: [
									{
										name: '回答正确',
										percent: 0,
										userList: [],
									},
									{
										name: '回答错误',
										percent: 0,
										userList: [],
									},
									{
										name: '未提交',
										percent: 0,
										userList: [],
									},
								],
							};
						}
					}
				});
			}
		},
		skipPage(type) {
			this.operateType = type;
		},
		filterTopicTypeName(value, list) {
			let index = topicTypeListEnum.findIndex((item) => item.value == (value || 0));
			if (index > -1) {
				return topicTypeListEnum[index].text;
			} else {
				return '';
			}
		},
		//返回
		reback() {
			this.$emit('checkMenu', { type: 'tempAnswerCount' });
		},
		getAnswerType(type) {
			let list = ['全答', '分组答', '抢答', '抽答', '选答'];
			return list[(type <= 0 ? 1 : type) - 1];
		},
	},
};
</script>
<style scoped lang="less">
.pannel {
	position: relative;
	width: 1162px;
	margin: 0 auto;
	@media screen and (max-width: 1366px) {
		width: 1024px;
	}
}

.conbox-con {
	border-radius: 8px;
	background: transparent;
	z-index: 6;
}

.conbox-hd {
	font-size: 22px;
	color: #2e2424;
	text-align: center;
	position: relative;
	margin-bottom: 20px;
	margin-top: 0;
}

.conbox-bd {
	width: 1162px;
	height: calc(100vh - 220px);
	background: rgb(243, 248, 255);
	border: 2px solid @primary-color;
	border-radius: 10px;
	margin: 0;
	position: relative;
	overflow: visible;
	.closeWin {
		position: absolute;
		right: -20px;
		bottom: -16px;
		width: 46px;
		height: 46px;
		img {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	.conbox-bd-inner {
		margin: 20px;
		background: rgb(255, 255, 255);
		border: 2px dashed @primary-color;
		border-radius: 10px;
		height: calc(100% - 40px);
		font-size: 18px;
		color: #2e2424;
		overflow: auto;

		.title {
			font-size: 30px;
			font-weight: 700;
			color: #333333;
			padding: 10px 22px;
		}
	}

	.barChart {
		width: 700px;
		height: 100%;
	}

	@media screen and (max-width: 1366px) {
		width: 1024px;
		height: calc(100vh - 160px);
		.userCount {
			&.rankCount {
				margin-top: 30px;
				.btn {
					font-size: 20px;
					padding: 10px 12px;
				}
				.detail {
					margin-top: 15px;
				}
			}
		}
		.barChart {
			width: 650px;
			height: 100%;
		}
	}
	@media all and (min-device-width: 1280px) and (min-device-height: 768px) {
		.barChart {
			width: 650px;
			height: 50vh;
		}
	}
}
.answerInfo {
	text-align: left;
	margin: 8px 0;
	padding: 7px 20px;
	font-size: 18px;
	background: #fff;
	border-radius: 10px;
	.topicTypeName {
		color: @primary-color;
		font-weight: bold;
	}
}
/deep/.ant-tabs {
	text-align: left;

	.ant-tabs-bar {
		height: 38px;
		border-bottom: none;
		margin: 0;
		background-color: #fff;
		border: 2px solid @primary-color;
		border-radius: 10px;

		.ant-tabs-tab-prev,
		.ant-tabs-tab-next {
			color: @primary-color;

			i {
				font-size: 20px;
			}
		}

		.ant-tabs-tab-prev {
			border-right: 2px solid @primary-color;
		}

		.ant-tabs-tab-next {
			border-left: 2px solid @primary-color;
		}

		.ant-tabs-tab-btn-disabled,
		.ant-tabs-tab-btn-disabled:hover {
			color: rgba(0, 0, 0, 0.25);
		}
	}

	.ant-tabs-tab {
		label {
			display: inline-block;
			height: 38px;
			line-height: 36px;
			padding: 0 20px;
			color: #242424;
			font-size: 16px;
			text-decoration: none;
			cursor: pointer;
		}
	}

	.ant-tabs-tab:last-child .tags-views-item {
		border: none;
	}

	label.active {
		background-color: @primary-color;
		color: #fff;
	}

	.isHasBorderRadius {
		background-color: @primary-color;
		color: #fff;
		border-radius: 10px 0 0 10px;
	}
	/* .ant-tabs-tab:first-child{
			label.active{
				background-color: @primary-color;
				color: #fff;
				border-radius: 10px  0  0 10px;
			}
		} */
	.ant-tabs-tab {
		padding: 0;
		margin: 0;
	}

	.ant-tabs-ink-bar {
		height: 0px;
		background-color: transparent;
	}
}

/***排名***/
.rank {
	text-align: center;
	padding-top: 40px;
	@media screen and (max-width: 1366px) {
		padding-top: 20px;
	}
}

.imgbox {
	//position: fixed;
	/* position: absolute;
		top: 40px;
		left: 50%;
		transform: translateX(-50%); */
	height: 160px;
	display: flex;
	justify-content: center;
	margin: 20px auto;

	.img-con {
		height: 157px;
		display: inline-block;
		position: relative;
		display: flex;
		align-items: flex-end;
	}

	.imgItem {
		position: absolute;
		bottom: 0;
		display: inline-block;
		margin: 0 20px;
		position: relative;
		text-align: center;

		img {
			width: 100%;
			height: 100%;
			/* position: absolute;
					bottom: 0; */
		}

		.number {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%);
			color: #fff;
			font-weight: bold;
		}

		.name {
			width: 100%;
			position: absolute;
			bottom: 11px;
			text-align: center !important;
			color: #fff;
			font-weight: bold;

			.name-stuName {
				word-wrap: break-word;
				line-height: 0.9;
				padding: 0 0 7px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
				text-align: center !important;
			}
		}

		&.img01 {
			//width: 231px;
			width: 181px;
			font-size: 30px;

			.number {
				top: 2%;
				font-size: 60px;
			}
		}

		&.img02 {
			//width: 198px;
			width: 148px;
			font-size: 28px;

			.number {
				top: 5%;
				font-size: 50px;
			}

			.name {
				bottom: 8px;
			}
		}

		&.img03 {
			//width: 178px;
			width: 128px;
			font-size: 26px;

			.number {
				top: 8%;
				font-size: 40px;
			}

			.name {
				bottom: 5px;
			}
		}

		&.img04 {
			//width: 131px;
			width: 110px;
			font-size: 18px;

			.number {
				top: 9%;
				font-size: 32px;
			}

			.name {
				bottom: 7px;
			}
		}

		&.img05 {
			width: 96px;
			//width: 66px;
			font-size: 16px;

			.number {
				font-size: 30px;
				top: 8%;
			}

			.name {
				bottom: 5px;
			}
		}
	}

	@media screen and (max-width: 1366px) {
		margin: 0 auto;
		.imgItem {
			&.img01 {
				width: 141px;
				font-size: 30px;

				.number {
					top: 2%;
					font-size: 50px;
				}
				.name {
					bottom: 6px;
				}
			}

			&.img02 {
				//width: 198px;
				width: 148px;
				font-size: 28px;

				.number {
					top: 5%;
					font-size: 50px;
				}

				.name {
					bottom: 8px;
				}
			}

			&.img03 {
				//width: 178px;
				width: 128px;
				font-size: 26px;

				.number {
					top: 8%;
					font-size: 40px;
				}

				.name {
					bottom: 5px;
				}
			}

			&.img04 {
				//width: 131px;
				width: 110px;
				font-size: 18px;

				.number {
					top: 9%;
					font-size: 32px;
				}

				.name {
					bottom: 7px;
				}
			}

			&.img05 {
				width: 96px;
				//width: 66px;
				font-size: 16px;

				.number {
					font-size: 30px;
					top: 8%;
				}

				.name {
					bottom: 5px;
				}
			}
		}
	}
}

.userCount {
	margin-top: 100px;
	margin-left: 30px;

	.btn {
		background: @primary-color;
		color: #fff;
		text-align: center;
		//line-height: 52px;
		border-radius: 26px;
		padding: 10px 20px;
		position: relative;
		.icon {
			width: 52px;
			height: 52px;
			position: absolute;
			top: -10px;
			left: 0;
		}

		& + .btn {
			margin-top: 20px;
		}

		&.warning {
			background: #e43636;
		}

		&.cancel {
			background: #ccc;
		}
	}

	.popoverCon {
		//display: block;
		display: none;
		position: absolute;
		right: -270px;
		top: -46px;
		width: 400px;
		background: @primary-color;
		border-radius: 10px;
		color: #fff;
		padding: 0 20px;
		z-index: 2;

		.popover-hd {
			font-size: 16px;
			font-weight: 700;
			text-align: left;
			border-bottom: 1px solid #fff;
			padding: 10px 0;
			// border-radius: 10px 10px 0 0;
			// position: relative;
			// /* 设置变形原点 */
			// transform-origin: center bottom;
			// /* 景深 40px 旋转 30deg */
			// transform: perspective(40px) rotateX(30deg);
		}

		.popover-bd {
			padding: 11px 0;
			font-size: 14px;
			font-weight: normal;
			.studName {
				display: inline-block;
			}
		}
	}

	.btn:hover {
		.popoverCon {
			display: block;
		}
	}

	&.rankCount {
		margin-top: 50px;
		.btn {
			// width: 295px;
			text-align: left;
			font-size: 22px;
			font-weight: bold;

			.name {
				margin-left: 40px;
			}
		}
	}

	.detail {
		margin-top: 25px;
		text-align: center;

		.num {
			color: @primary-color;
			font-size: 16px;
			font-weight: 400;
		}

		a {
			margin-left: 15px;
			font-size: 13px;
			color: #2e2424;
		}
		.finishStuPer {
			color: #4d5053;
			font-size: 16px;
			font-weight: 400;
			margin-left: 20px;
		}
	}
}

/* 主体内容右侧tab */
.right-tabs {
	position: absolute;
	left: calc(100% - 148px);
	bottom: 25px;
	background: @primary-color;
	width: 123px;
	padding: 2px 6px 2px 2px;
	color: #4d5053;
	font-size: 22px;
	font-weight: bold;
	.tab {
		background: #fff;
		text-align: center;
		cursor: pointer;
		&.blue {
			background: none;
			color: #fff;
		}
	}
}
/* **头部题目类型** */
.topicType {
	width: 304px;
	height: 100px;
	line-height: 100px;
	position: fixed;
	top: 0;
	left: 49px;
	z-index: 7;
	.img {
		width: 304px;
		height: 100px;
		position: absolute;
		right: 0;
	}
	.name {
		position: absolute;
		top: 70%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 30px;
		color: #fff;
	}
	@media screen and (max-width: 1366px) {
		width: 254px;
		height: 80px;
		line-height: 80px;
		.img {
			width: 254px;
			height: 80px;
		}
		.name {
			font-size: 28px;
		}
	}
}
</style>
